import { useEffect } from "react";
import { useDrop } from "react-dnd";
import DraggableView from "../Draggable";
import DraggableBOXView from "../BOX";
import { Collapse, CollapseProps } from "antd";

interface MyComponentProps {
  // id: string
  handleDrop?: (e?: any) => void;
  state?: any;
  children?: any;
}

const LeftDropableView: React.FC<MyComponentProps> = (props) => {
  // 拖拽
  const [{ isOver, canDrop }, drop] = useDrop(() => ({
    accept: 'card',
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
    drop: (item: any, monitor: any) => {
      console.log(item.id, monitor)
      props.handleDrop(item)
    }
  }), [props.state])

  useEffect(() => {

  }, [])

  const items: CollapseProps['items'] = [
    {
      key: '1',
      label: '容器',
      children: <div ><DraggableBOXView key={"NNN"} id={"NNN"} containerId="LeftDropable" /></div>,
    },
    {
      key: '2',
      label: '组件',
      children:<div ><DraggableView key={"AAA"} id={"BBB"} containerId="LeftDropable" /></div> ,
    },
  ];
  const onChange = (key: string | string[]) => {
    console.log(key);
  };
  return (

    <div ref={drop}
      className={'w-full h-full inline-block  rounded bg-slate-400'}>
      <Collapse items={items} defaultActiveKey={['1']} ghost  onChange={onChange} />


      {/* {props.children} */}
    </div>
  )

}
export default LeftDropableView;